<template>
  <div class="table-page py-0 my-0">
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
      <a-form-item field="keyword" hide-label>
        <a-input v-model="listParams.keyword" placeholder="输入关键字检索" @press-enter="changeCurrent(1)"></a-input>
      </a-form-item>
      <a-form-item field="startTime" hide-label>
        <ms-date
          v-model:start="listParams.startTime"
          v-model:end="listParams.endTime"
          @dateChange="changeCurrent(1)"
        ></ms-date>
      </a-form-item>
      <a-form-item hide-label>
        <a-space>
          <a-button type="primary" size="small" @click="getTableData">
            <template #icon>
              <icon-search />
            </template>
            <template #default>查询</template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <div class="w-full flex-1 overflow-hidden">
      <a-table
        row-key="id"
        v-model:columns="columns"
        :loading="loading"
        :data="tableData"
        :selected-keys="checkedValue"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        :row-selection="{ type: 'radio' }"
        @select="onSelect"
      >
      </a-table>
    </div>
  </div>
</template>

<script setup>
import ImgHoverPreview from '@/components/ImgHoverPreview/index.vue'
import { articlesList, linkSelect } from '@/apis'
import { usePagination } from '@/hooks'
const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])
const columns = ref([
  {
    title: '文章标题',
    dataIndex: 'title'
  },
  {
    title: '背景图',
    render: (data) => {
      const url = data.record.pic
      return h(ImgHoverPreview, { url, width: 50 })
    }
  },
  {
    title: '发布时间',
    sortable: {
      sorter: true,
      sortDirections: ['descend', 'ascend']
    },
    dataIndex: 'publishTime',
    align: 'center',
    render: (data) => {
      return `${data.record.publishTime}`
    }
  }
])

const loading = ref(false)
const tableData = ref([])
const checkedValue = ref([])
const listParams = reactive({
  pageSize: 10,
  page: 1,
  id: undefined,
  startTime: undefined,
  endTime: undefined,
  keyword: undefined
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    const res = await articlesList(listParams)
    tableData.value = res.data.list
    setTotal(res.data?.total ?? 0)
  } finally {
    loading.value = false
  }
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.endTime = listParams.startTime = listParams.keyword = undefined
  changeCurrent(1)
}

watch(
  () => props.displayInfo,
  (newValue) => {
    if (newValue.typeId == 2 && newValue.id) {
      checkedValue.value = [Number(newValue.id)]
      listParams.id = newValue.id
    } else {
      checkedValue.value = []
    }
    changeCurrent(1)
  },
  { deep: true, immediate: true }
)

// 选择
const onSelect = async (e) => {
  const itemData = tableData.value.find((item) => {
    return e[0] === item.id
  })
  const res = await linkSelect({
    rule: props.tabCurrentInfo.rule,
    isLogin: props.tabCurrentInfo?.isLogin ?? undefined,
    param: {
      id: itemData.id,
      title: itemData.title
    }
  })
  emit('handleCheck', res.data ?? '')
}
</script>

<style lang="scss" scoped></style>
